<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>datagrid数据表格使用</title>
	<!-- 引入easyui相关的资源文件 -->
	<link rel="stylesheet" type="text/css"
	 href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入ztree资源文件 -->
	 <link rel="stylesheet"
	  href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
	<script type="text/javascript"
	 src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
	<script type="text/javascript">
	
	     $(function(){
	    	 $("#grid").datagrid(
	    		{
	    			//定义表头
	    			columns:[[
	    				{field:'id',title:'编号',checkbox:true},
	    				{field:'name',title:'姓名'},
	    				{field:'age',title:'年龄'}
	    			]],
	    				url:'${pageContext.request.contextPath }/json/data.json',
	    				pagination:true,
	    				toolbar:[
	    					{text:'添加',iconCls:'icon-add',handler:function(){
	    						//url:'http://www.baidu.com';
	    						alert("添加")
	    					}},
	    					{text:'修改',iconCls:'icon-edit'},
	    					{text:'删除',iconCls:'icon-remove'}
	    				]
	    		}	 
	    	 );
	     });
	
	</script>
</head>
<body>
     <h3>加载远程的json数据</h3>
    <table id="grid"></table>
</body>
</html>